@import 'variables';

.range-slider-component {
  position: relative;
  margin: 10px 0;
  display: flex;
  align-items: center;

  .min-value {
    margin-right: 5px;
  }

  .progress-bar {
    width: 100%;
    background: #ccc;
    position: relative;
    height: 5px;
    border-radius: 5px;
    flex-grow: 1;
    box-shadow: none;

    .progress-line {
      width: 0;
      background: $brand-primary;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      border-radius: 5px;
    }

    .visible-dragger {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: white;
      position: absolute;
      top: -5px;
      opacity: 0;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.46);
      transition: border-radius 0.5s ease;
      cursor: pointer;
      cursor: -webkit-grab;
      pointer-events: none;
      z-index: 99999;

      .slider-value {
        display: none;
      }
    }

    input[type="range"] {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      opacity: 0;

      &::-webkit-slider-thumb {
        pointer-events: all;
        position: relative;
        z-index: 9999999;
        outline: 0;
        cursor: -webkit-grab;
      }

      &::-moz-range-thumb {
        pointer-events: all;
        position: relative;
        z-index: 9999999;
        outline: 0;
        cursor: -moz-grab;
      }

      &::-ms-thumb {
        pointer-events: all;
        position: relative;
        z-index: 9999999;
        outline: 0;
        cursor: pointer;
      }
    }
  }

  .max-value {
    margin-left: 5px;
  }

  &.vertical{
    .progress-bar{
      transform: rotate(-90deg);
    }
  }

  &:hover,
  &.is-loading,
  &.is-dragging,
  &.is-infinity,
  &.show-value {
    .progress-bar .visible-dragger {
      opacity: 1;
    }
  }

  &.is-loading {
    .progress-bar .visible-dragger .loading-spinner {
      display: block;
    }
  }

  &.is-dragging,
  &.is-infinity,
  &:not(:hover).show-value {
    .progress-bar .visible-dragger {
      width: initial !important;
      height: initial !important;
      font-size: 10px;
      border-radius: 5px;
      top: -8px;
      padding: 0 4px;
      color: black;

      .slider-value {
        display: block;
      }

      .loading-spinner {
        display: none;
      }
    }
  }
}

$loader-size: 8px;
$loader-color: $brand-primary;
$loader-animation-duration: 1.15s;

.loading-spinner {
  border: 0 solid $loader-color;
  border-radius: 50%;
  position: relative;
  animation: loader-figure $loader-animation-duration cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  transform: translate(3px, 3px);
  display: none;
}

@keyframes loader-figure {
  0% {
    width: 0;
    height: 0;
    left: $loader-size/2;
    top: $loader-size/2;
    background-color: $loader-color
  }
  29% {
    background-color: $loader-color;
  }

  30% {
    top: 0;
    left: 0;
    width: $loader-size;
    height: $loader-size;
    background-color: transparent;
    border-width: $loader-size / 2;
    opacity: 1;
  }

  100% {
    top: 0;
    left: 0;
    width: $loader-size;
    height: $loader-size;
    border-width: 0;
    opacity: 0;
    background-color: transparent;
  }
}

